import React from 'react'

// 类组件
class Test2 extends React.Component {
  // 构造函数
  constructor(props) {
    // 必须调用super(props)（固定写法）
    super(props)

    // 1. 初始化state
    this.state = {
      name: '小明',
      age: 18,
      userList: [
        { name: '名字1', score: 11, id: 1 },
        { name: '名字2', score: 12, id: 2 },
        { name: '名字3', score: 13, id: 3 }
      ]
    }
    // 2. 绑定事件处理函数的this
    // this.handleClick = this.handleClick.bind(this)
    this.handleClick2 = this.handleClick2.bind(this)
  }

  // 事件处理函数
  handleClick() {
    console.log('this指向：', this) // 正确指向组件实例
    console.log('this指向：', this.state.name) // 正确指向组件实例
  }
  handleClick2() {
    console.log('this指向2：', this) // 正确指向组件实例
    console.log('this指向2：', this.state.name) // 正确指向组件实例
  }

  render() {
    setTimeout(() => {
      this.setState({
        name: '小张',
        // age: 22
      })
    }, 3000)

    /**
     * 不在html中写，放在外层处理逻辑
     */
    const arr = []
    // 可以使用forEach，返回是一个list即可。
    this.state.userList.forEach(user => {
      arr.push(
        <div key={ user.id }>
          <h4>名字：{ user.name }</h4>
          <p>分数：{ user.score }</p>
        </div>
      )
    })
    return (
      <div>
        <h2>Test2文件 - 基本使用：类组件</h2>

        {/*setState的时候，如果只是部分值，不会影响其他的内容；如果是useState，那么必须是所有的值才行，否则就丢失了；*/}
        名字：{ this.state.name }，年龄：{this.state.age} <br/>
        <button onClick={ this.handleClick }>点击，看this指向问题(没有bind)</button> <br/>
        <button onClick={ this.handleClick2 }>点击，看this指向问题（bind）</button> <br/>
        <button onClick={ () => this.handleClick() }>点击，看this指向问题（箭头函数）</button> <br/>
        <button onClick={ this.handleClick.bind(this) }>点击，看this指向问题（调用是bind）</button> <br/>

        <h3>遍历：使用map</h3>
        <div>
          { this.state.userList.map((item, index) => (
            <div key={ item.id }>
              <h4>{ item.name }</h4>
              <p>{ item.score }</p>
            </div>
          )) }
        </div>

        <h3>遍历：单独定义在外面，使用了ForEach</h3>
        <div>{ arr }</div>
      </div>
    )
  }
}

export default Test2
